<template>
    <div>
            <header class="info">
                <div class="info1">
                    <router-link class="mui-icon mui-icon-back" to="/chat"></router-link>
                </div>
                <div class="info2">
                    <div class="name">{{ unreadInfo.name }}</div>
                    <div class="phone">{{ unreadInfo.phone }}</div>
                </div>
            </header>
            <div class="body">
                {{unreadInfo.message}}
            </div>
            <footer class="footer">
                <div class="mui-icon mui-icon-camera fl"></div>
                        <div class="mui-input-row fm">
                            <input type="text" placeholder="普通输入框">
                        </div>
                <div class="mui-icon mui-icon-redo fr"></div>
            </footer>
        </div>
</template>
<script>
export default {
    data(){
        return{
            id :  this.$route.params.id,
            unreadInfo : {},
        }
    },
    created(){
        this.getUnread();
    },
    methods:{
        getUnread(){
            const list = [
                { id:'1', name:'郑伊健', phone:'18886969123', message:'Hi，李明明，申请交行信息卡，100元等你拿，李明明，申请交行信息卡，100元等你拿，' },
                { id:'2', name:'陈小春', phone:'18693214895', message:'信息化推进办公室张彦合同付款信息化推进办公室张彦合同付款信息化推进办公室张彦合同付款' },
                { id:'3', name:'中国联通', phone:'10010', message:'2020年到了，您是中国移动的老用户，先祝你新年快乐，新年我们会送您1月欠费不停机业务。。' },
                { id:'4', name:'范闲', phone:'15215251293', message:'新春到来喜事多，合家团圆幸福多；心情愉快朋友多，身体健康快乐多；一切顺利福气多，新年吉祥生意多；祝您好事多！多！多！' },
                { id:'5', name:'刘建井', phone:'13636321234', message:'新年的祝福数不胜数，新年的愿望好多好多，新年的问候依旧美好，在这个温馨的时刻，送上我最真挚的祝福，愿你新年健康加平安，幸福又快乐！' },
                { id:'6', name:'冉述保', phone:'15645123265', message:'一张小小的贺卡，一声亲切的问候，代表着关怀和思念，包含着祝福与鼓励，祝新春快乐，合家幸福！' },
                { id:'7', name:'藤子京', phone:'18756231459', message:'愿明亮喜庆的春节，象征与温暖你一年中的每个日日夜夜，祝你欢欢喜喜度春节，高高兴兴过新年！' },
            ];
            for(var i=0; i<list.length; i++){
                if(list[i].id == this.id){
                
                    this.unreadInfo = list[i];
                }
            }
        }
    }
}
</script>
<style scoped>
.info{
    width: 100%;
    height: 8vh;
    background-color:  #d9d9d9;
}
.info1{
    width: 5%;
    float: left;
}
.info2{
    width: 95%;
    float: left;
}
.mui-icon.mui-active {
    padding-top: 50%;
    color: #007aff;
}
.name{
    height: 50%;
    text-align: center;
    font-size: 18px;
}
.phone{
    height: 30%;
    text-align: center;
}
.body{
    height: 71vh;
    font-size: 15px;
}
.footer{
    width: 100vw;
    height: 7vh;
    position: relative;
    background-color: #d9d9d9;
}
.fl{
    float: left;
    width: 15%;
        padding: 14px;
}
.mui-input-row{
    float: left;
    height: 40px;
    width: 70%;
    padding-top: 6px;
}
.mui-input-row {
    clear: none;
}
.fr{
    float: left;
    width: 15%;
        padding: 14px;
}
</style>